<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .d1{
                width:200px;
                height: 200px;
                background:yellow;

                /*行高，行与行之间的距离*/
                line-height:50px;

            }
            .d2{
                width:200px;
                height: 200px;
                background:yellowgreen;

                /*如果文字正好是一行，此时line-height的值和高度一致的时候，文字会垂直方向居中*/
                line-height:200px;

                /*文本的横向居中*/
                text-align: center;

            }
            img{

                /*可用于图片和文字的对齐方式：top、middle、bottom等*/
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <!--<div class="d1">我是中国人，我爱中国我是中国人，我爱中国我是中国人，我爱中国我是中国人，我爱中国我是中国人，我爱中国我是中国人，我爱中国我是中国人，我爱中国</div>-->
        <div class="d2">我是中国人</div>
        <div>
            <img src="../images/hudie.png" alt="">我是蝴蝶
        </div>
    </body>
</html>